<script setup>
import {ref,computed,onMounted} from 'vue'
import {addbusinessList,viewBusiness,getChannel,getArea,getDiscipline} from '@/api/business'
import { ElMessage } from 'element-plus'

// 使用defineProps方法来接收props
const props = defineProps ({
    dialogVisible:{
    type:Boolean,
    default :false
  }
 })


//定义数据对象
const formData = ref({
    name: "",
    phone: "",
    gender: "",
    qqNum: "",
    age: '',
    city: "",
    subjects: "",
    sourceChannel: "",
    notes: ""
})

//定义校验规则
const rules = ref({
  name:[{ required: true, message: '请输入姓名', trigger: 'blur' },
  {min: 2,max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}],

  phone:[{ required: true, message: '请输入手机号', trigger: 'blur' },
  {pattern: /^[1][3-9][0-9]{9}$/,trigger: 'blur', message: '请输入正确的手机号' }],

  subjects:[{ required: true, message: '请输入意向学科', trigger: 'blur' }]
})

const formRef = ref(null)

const emit = defineEmits(["update:dialogVisible",'addBusiness'])
const close = () => {

    // 子传父
     // 重置表单
   formRef.value.resetFields()
    emit("update:dialogVisible", false)
}

// 确定添加
const btnOk = async () =>{
  // await formRef.value.validate () 
  if (formData.value.id) {
    close() // 关闭弹层
  } else {
    await formRef.value.validate () 
    await addbusinessList(formData.value)
    ElMessage.success('新建成功')
  }
  close() // 关闭弹层
  emit("addBusiness")
}

// 查看商机详情
const getBusiness = async (id) => {
  const {data} = await viewBusiness(id)
  formData.value = data
}

// 向外暴露的方法
defineExpose({
  getBusiness
})

const showTitle = computed(() => {
    return formData.value.id ? '查看商机' : '新建商机'
  })

 onMounted(()=>{
    getAreaAPI()
    getDisciplineAPI()
    getChannelAPI()
  })
// 地区列表
const areaList = ref([])
// 获取地区
const getAreaAPI = async()=>{
  const {data} = await getArea()
  areaList.value = data
}

// 意向学科列表
const disciplineList = ref([])
// 获取意向学科
const getDisciplineAPI = async()=>{
  const {data} = await getDiscipline()
  disciplineList.value = data
}

// 渠道来源数组
const channelList = ref([])
// 获取渠道来源
const getChannelAPI = async()=>{
  const {data} = await getChannel()
  channelList.value = data
}


</script>

<template>
    <div class="AddBusiness">
        <el-dialog
           v-model="props.dialogVisible"
           :title="showTitle"
           width="40%"
           @close="close"
        >
          <el-form :model="formData" :rules="rules" ref="formRef">
            <el-form-item label="姓名" prop="name">
                <el-input  placeholder="请输入" style= "width: 250px;" v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
                <el-input  placeholder="请输入" style= "width: 250px;" v-model="formData.phone"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="gender">
               <el-radio-group style= "width: 250px;" v-model="formData.gender">
                 <el-radio label="男"></el-radio>
                 <el-radio label="女"></el-radio>
               </el-radio-group>
            </el-form-item>
           
            <el-form-item label="QQ" prop="qqNum">
                <el-input  placeholder="请输入" style= "width: 250px;" v-model="formData.qqNum"></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
              <el-input  placeholder="请输入" style= "width: 250px;" v-model="formData.age"></el-input>
            </el-form-item>
            <el-form-item label="地区" prop="city">
              <el-select  placeholder="请选择" style= "width: 250px;" v-model="formData.city">
                <el-option v-for="item in areaList" :key="item.id" label="" :value="item.content"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="意向学科" prop="subjects">
              <el-select  placeholder="请选择" style= "width: 250px;"  v-model="formData.subjects"> 
                <el-option v-for="item in disciplineList" :key="item.id" label="" :value="item.content"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="渠道来源" prop="sourceChannel">
              <el-select  placeholder="请选择" style= "width: 250px;" v-model="formData.sourceChannel">
                <el-option v-for="item in channelList" :key="item.id" label="" :value="item.content"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="备注" prop="notes">
                <el-input type="textarea" style= "width: 530px;" v-model="formData.notes"></el-input>
            </el-form-item>
          </el-form>

          <template #footer>
            <span class="dialog-footer">
              <el-button @click="close">返回</el-button>
              <el-button type="primary" @click="btnOk">确 定</el-button>
            </span>
          </template>
        </el-dialog> 
    </div>
</template>

<style  lang="less" scoped>

.el-form{
  display: flex;
  flex-wrap: wrap;

    .el-form-item{
        display: inline-block;
        margin-left: 25px;
       }

}
  
</style>